<template>
  <n-card :bordered="false" class="proCard">
    <div>
      <QueryForm :init-query="initQuery" v-model:value="queryForm" @submit="queryReloadTable">
        <template #more="{ queryForm }">
          <QueryItem
            :query-form="queryForm"
            :options-map="optionsMap"
            :table-columns="queryItems.more"
          ></QueryItem>
        </template>
        <template #default="{ queryForm }">
          <QueryItem
            :query-form="queryForm"
            :options-map="optionsMap"
            :table-columns="queryItems.default"
          ></QueryItem>
        </template>
      </QueryForm>
    </div>
    <div>
      <n-space>
        <!--        <n-button type="primary" :disabled="!vCtl.addBtn" @click="doSaveModal()">-->
        <!--          新建-->
        <!--        </n-button>-->
        <!--        <n-button type="warning" :disabled="!vCtl.updateBtn" @click="doUpdateModal()">-->
        <!--          编辑-->
        <!--        </n-button>-->
        <!--        <n-button type="error" :disabled="!vCtl.delBtn" @click="doDeleteModal()">-->
        <!--          删除-->
        <!--        </n-button>-->
      </n-space>
    </div>
    <BasicTable
      :columns="tableColumns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      @update:checked-row-keys="onCheckedRowEvent"
      :scroll-x="1090"
    >
      <template #tableTitle> </template>
      <template #toolbar> </template>
    </BasicTable>
  </n-card>
</template>

<script lang="ts">
  import { defineComponent, watch, computed } from 'vue';
  import { BasicTable, QueryForm, QueryItem } from "slash-admin";
  import httpApi from './httpApi';

  import {
    queryItemList,
    checkedRows,
    doDeleteModal,
    doSaveModal,
    doUpdateModal,
    initQuery,
    onCheckedRowEvent,
    queryForm,
    reloadTable,
    tableColumns,
    tableRef,
    vCtl,
  } from './Service';
  import { getOptionsMap } from "./options";

  export default defineComponent({
    components: { BasicTable, QueryForm, QueryItem },
    props: {
      queryFormValue: {
        type: [Object],
        default: () => {
          return {};
        },
      },
    },
    setup(props, ctx) {
      const optionsMap = getOptionsMap();
      queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
      const loadDataTable = async (res) => {
        console.log('更新', checkedRows.value);
        return await httpApi.selectPageListByUser({
          searchKey: null,
          ...res,
          ...queryForm.value,
        });
      };
      const queryReloadTable = async () => {
        tableRef.value.resetPageReload();
      };
      const queryItems = computed(() => {
        const result: { default: MyTableBasicColumn[]; more: MyTableBasicColumn[] } = {
          default: [],
          more: [],
        };
        queryItemList.forEach((item) => {
          if (item.searchProps) {
            if (item.searchProps.more) {
              result.more.push(item);
            } else {
              result.default.push(item);
            }
          }
        });

        return result;
      });
      watch(props.queryFormValue, () => {
        queryForm.value = Object.assign(queryForm.value, props.queryFormValue);
        console.log('更新完成');
      });
      return {
        queryReloadTable,
        loadDataTable,
        reloadTable,
        tableColumns,
        vCtl,
        onCheckedRowEvent,
        queryForm,
        tableRef,
        initQuery,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
        optionsMap,
        queryItems
      };
    },
  });
</script>

<style lang="less" scoped></style>
